import { useState, useEffect } from 'react';
import { EnrollBookState } from './interface';
import { fetchBookDetails, deleteBook } from '@/service/enrollBook';
import { Descriptions, Button, Modal, message, Image } from 'antd';
import type { ProFieldFCMode } from '@ant-design/pro-utils';
import { history } from 'umi';
import Field from '@ant-design/pro-field';
export default function Details(props: any) {
    const bookid = props.match.params.id;
    const show = 'read' as ProFieldFCMode;
    const [state, setstate] = useState<EnrollBookState>();
    const dataSourceRequest = async () => {
        const response = await fetchBookDetails(bookid);
        if (response.code === 200) {
            let obj = response.data as unknown as EnrollBookState;
            setstate(obj);
        }
    };
    useEffect(() => {
        dataSourceRequest();
    }, [bookid]);
    const detele = () => {
        Modal.confirm({
            icon: '',
            title: '确认删除',
            content: `您确定要删除当前记录么？`,
            okText: '确认',
            cancelText: '取消',
            maskClosable: true,
            onOk: async () => {
                const response = await deleteBook({ book_id: bookid });
                if (response?.code === 200) {
                    message.success('删除成功');
                    history.push('/enrollBook');
                } else {
                    message.success('删除失败');
                }
            },
            onCancel() {},
        });
    };
    return (
        <div style={{ padding: '20px', background: '#fff' }}>
            <Descriptions column={4}>
                <Descriptions.Item label="RFID编号">
                    <Field text={state?.rfid} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="ISBN编号">
                    <Field text={state?.isbn} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="书名">
                    <Field
                        text={state?.book_name}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="作者">
                    <Field text={state?.author} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="出版时间">
                    <Field
                        text={state?.publish_date}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="出版社">
                    <Field
                        text={state?.publishing_house}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="类别">
                    <Field
                        text={state?.cate_name}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
            </Descriptions>
            <Descriptions>
                <Descriptions.Item label="封面">
                    <Image src={state?.img_url} width={150} />
                    {/* <Field
                        text={state?.img_url}
                        valueType="image"
                        mode={show}
                        style={{width:'200px'}}
                    /> */}
                </Descriptions.Item>
            </Descriptions>
            <div style={{ textAlign: 'right' }}>
                <Button
                    htmlType="button"
                    type="primary"
                    key="edit"
                    style={{ marginRight: '15px' }}
                    onClick={() => {
                        history.push(`/enrollBook/editBook/${bookid}`);
                    }}
                >
                    编辑
                </Button>
                <Button htmlType="button" key="delete" onClick={() => detele()}>
                    删除
                </Button>
            </div>
        </div>
    );
}
